<template>
  <view class="lives-container">
    <!-- 顶部主tab切换栏 -->
    <view class="main-tabs">
      <view
        class="tab-item"
        :class="{ active: activeMainTab === 'follow' }"
        @tap="switchMainTab('follow')"
      >
        <text>关注</text>
        <view
          class="tab-line"
          v-if="activeMainTab === 'follow'"
          :style="{
            backgroundColor: activeMainTab === 'follow' ? t('color1') : '#fff',
          }"
        ></view>
      </view>
      <view
        class="tab-item"
        :class="{ active: activeMainTab === 'live' }"
        @tap="switchMainTab('live')"
      >
        <text>直播</text>
        <image
          class="live-img"
          :src="static_url + '/static/img/zb-live.gif?timestamp=' + Date.now()"
        ></image>
        <view
          class="tab-line"
          v-if="activeMainTab === 'live'"
          :style="{
            backgroundColor: activeMainTab === 'live' ? t('color1') : '#fff',
          }"
        ></view>
      </view>
      <view
        class="tab-item"
        :class="{ active: activeMainTab === 'playback' }"
        @tap="switchMainTab('playback')"
      >
        <text>回放</text>
        <view
          class="tab-line"
          v-if="activeMainTab === 'playback'"
          :style="{
            backgroundColor:
              activeMainTab === 'playback' ? t('color1') : '#fff',
          }"
        ></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <!-- 左右滑动方案 -->
    <!-- <swiper
      class="content-swiper"
      :current="swiperCurrent"
      @change="handleSwiperChange"
      @transition="handleSwiperTransition"
      @animationfinish="handleSwiperAnimationFinish"
    > -->

    <view class="content-swiper">
      <!-- 关注内容页 -->
      <!-- <swiper-item v-if="activeMainTab === 'follow'"> -->
      <!-- <view v-if="activeMainTab === 'follow'"> -->
      <!-- <view v-if="livefollow.length > 0">
          <view>
            <view class="follow-list">
              <view
                v-for="(item, index) in livefollow"
                :key="index"
                class="follow-item"
                @tap="todetail(item)"
              >
                <view
                  class="status-tag"
                  :style="{
                    backgroundColor: item.status == 1 ? t('color1') : '#F9B90B',
                  }"
                >
                  <image
                    v-if="item.status == 1"
                    class="status-icon"
                    src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250508/27ddec96cb2c3f486e7b4da83c6d345c.gif"
                  ></image>
                  <text>{{ coverStatus(item.status) }}</text>
                  <text
                    v-if="item.status != 1"
                    class="live-time"
                    style="margin-left: 10rpx"
                    >{{ item.liveTime }}</text
                  >
                </view>
                <view class="item-top">
                  <image
                    class="item-img"
                    :src="item.cover"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="item-bottom">
                  <view class="bottom1">
                    <image class="item-img" :src="item.cover"></image>
                  </view>
                  <view class="bottom2">
                    <text class="item-name">{{ item.title }}</text>
                    <text class="item-desc">{{ item.followNumber }}关注</text>
                  </view>
                  <view class="bottom3">
                    <text
                      class="live-follow"
                      @click.stop="handlefollow(item)"
                      :style="{ backgroundColor: t('color1') }"
                      >{{ item.follow === 1 ? "已关注" : "关注" }}</text
                    ></view
                  >
                </view>
              </view>
            </view>
          </view>
          <nomore text="没有更多内容了" v-if="nomore2"></nomore>
        </view> -->

      <!-- <view v-else class="follow-empty">
          <nodata text="暂无关注内容"></nodata>
        </view> -->
      <!-- </view> -->
      <!-- </swiper-item> -->

      <!-- 直播内容页 v-if="activeMainTab === 'live'"-->
      <!-- <swiper-item v-if="activeMainTab === 'live'">-->
      <view v-if="activeMainTab === 'follow' || activeMainTab === 'live'">
        <view v-if="liveCategories.length > 0">
          <!-- 子tab栏，滑动时显示，静止n秒后隐藏 -->
          <view class="sub-tabs" :class="{ hidden: isSubTabsHidden }">
            <scroll-view
              ref="subTabsScroll"
              scroll-x
              class="sub-tabs-scroll"
              :scroll-left="subTabScrollLeft"
              @scroll="subtabshandleScroll"
              @scrolltolower="rightReach"
            >
              <view
                class="sub-tab-item"
                v-for="(item, index) in liveCategories"
                :key="index"
                :class="{ active: activeSubTab === index }"
                @tap="switchSubTab(index)"
              >
                <view class="item-content">
                  <image
                    class="category-img"
                    :src="item.image"
                    mode="aspectFit"
                    :style="{
                      border:
                        item.status == 1 ? '4rpx solid ' + t('color1') : 'none',
                    }"
                  ></image>
                  <!-- :class="item.status === 'live' ? 'live-tag' : 'preview-tag'" -->
                  <view
                    class="status-tag"
                    :style="{
                      backgroundColor:
                        item.status == 1 ? t('color1') : '#F9B90B',
                    }"
                  >
                    <image
                      v-if="item.status == 1"
                      class="status-icon"
                      :src="pre_url + '/static/images/zb-live.gif'"
                    ></image>
                    <text>{{ coverStatus(item.status) }}</text>
                  </view>
                  <text
                    class="category-name"
                    :style="{
                      color: activeSubTab === index ? t('color1') : '#000',
                    }"
                    >{{ item.title }}</text
                  >
                  <text class="category-img-name">{{
                    item.title.length > 4 ? item.title.slice(0, 4) : item.title
                  }}</text>
                  <!-- <text v-if="item.status != 1" class="live-time">{{
                    item.liveTime.slice(5)
                  }}</text> -->
                </view>
              </view>
            </scroll-view>
          </view>

          <!-- 直播轮播图  circular="true"-->
          <swiper
            class="live-swiper"
            vertical="true"
            :current="currentIndex"
            @change="handleLiveSwiperChange"
            :style="{
              height: isSubTabsHidden
                ? 'calc(100vh - 88rpx)'
                : 'calc(100vh - 298rpx)',
            }"
          >
            <swiper-item
              v-for="(item, index) in liveCategories"
              :key="index"
              @tap="enterLiveRoom(item)"
            >
              <view class="live-item">
                <image
                  class="live-cover"
                  :src="item.cover"
                  mode="aspectFill"
                ></image>

                <view class="liveShadow"> </view>

                <!-- 直播信息 -->
                <view class="liveinfo">
                  <view class="left">
                    <view class="live-head">
                      <image
                        class="live-icon"
                        :src="item.image"
                        mode="aspectFit"
                      ></image>
                      <view
                        class="live-follow"
                        @click="handlefollow(item)"
                        :style="{ backgroundColor: t('color1') }"
                      >
                        <image
                          class="follow-icon"
                          v-if="item.follow == 1"
                          mode="aspectFit"
                          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250509/c0fd6ab758b747fe5370e2b64a94dfb7.png"
                        ></image>
                        <image
                          v-if="item.follow != 1"
                          mode="aspectFit"
                          class="follow-icon"
                          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250509/2c86dfcbc114138fbbb4913b2f6951a1.png"
                        ></image>
                        {{ item.follow === 1 ? "已关注" : "关注" }}</view
                      >
                    </view>
                    <view class="live-title">{{ item.title }}</view>
                    <view
                      class="live-more"
                      :style="{ backgroundColor: t('color1') }"
                      @click="handleMoreClick"
                      >更多频道
                      <image
                        class="icon"
                        :style="{
                          transform: isSubTabsHidden
                            ? 'rotate(0deg)'
                            : 'rotate(180deg)',
                        }"
                        src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250508/cbf5f2aa5f06810f8f3d5968544c3f51.png"
                      ></image>
                    </view>
                  </view>
                  <!-- 分享按钮 -->
                  <view class="share-btn" @click="handleButtonClick">
                    <image
                      src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250306/f76c82683244b5a6ee08e236baa94885.png"
                      class="btn-icon"
                    ></image>
                    <view class="btn-text">分享</view>
                  </view>
                </view>

                <!-- 直播状态标签 -->
                <!-- <view
                class="status-badge"
                :class="item.status ==1 ? 'live-badge' : 'preview-badge'"
              >
                <text>{{ item.status ==1 ? "直播中" : "预告中" }}</text>
              </view> -->
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view v-else>
          <nodata text="暂无内容"></nodata>
        </view>
      </view>
      <!-- </swiper-item> -->

      <view v-if="activeMainTab === 'playback'">
        <view v-if="playbacks.length > 0">
          <view>
            <view class="pb-list">
              <view
                v-for="(item, index) in playbacks"
                :key="index"
                class="pb-item"
              >
                <view class="item-bottom">
                  <view class="bottom1">
                    <image
                      class="item-img"
                      :src="item.cover"
                      mode="aspectFill"
                    ></image>
                  </view>
                  <view class="bottom2">
                    <view class="item1">
                      <view class="i-time" :style="{ color: t('color1') }"
                        >{{ formatDateTime(item.liveTime) }} 开播</view
                      >
                      <image
                        class="i-share"
                        src="https://pic.hedashepin.com/upload/3/20250530/e166e587d1c74babc569cea1307d8791.png"
                        @click="handleButtonClick2(item)"
                      ></image>
                    </view>
                    <view class="item2">{{ item.title }}</view>
                    <view class="item3">
                      <!-- <image
                        class="i-img"
                        :src="item.image"
                        mode="aspectFill"
                      ></image> -->
                      <image
                        class="i-img"
                        :src="initdata.logo"
                        mode="aspectFill"
                      ></image>
                      <!-- <view class="i-author">{{ item.publisher }}</view> -->
                      <view class="i-author">和大会客厅</view>
                    </view>
                    <view class="item4">
                      <view
                        v-if="item.status != 1"
                        class="i-btn"
                        @tap="toPlayBack(item)"
                        :style="{ background: t('color1') }"
                        >查看回放</view
                      >
                      <view v-else class="i-btn2">回放生成中</view>
                    </view>
                  </view>
                  <!-- <view class="bottom3">
                    <text
                      class="live-follow"
                      @click.stop="handlefollow(item)"
                      :style="{ backgroundColor: t('color1') }"
                      >{{ item.follow === 1 ? "已关注" : "关注" }}</text
                    ></view
                  > -->
                </view>
                <!-- <view class="item-btn" @tap="toPlayBack">查看回放</view> -->
              </view>
            </view>
          </view>
          <nomore text="没有更多内容了" v-if="nomore2"></nomore>
        </view>
        <view v-else class="follow-empty">
          <nodata text="暂无回放"></nodata>
        </view>
      </view>
    </view>
    <!-- </swiper> -->

    <!-- <view
      class="liveShadow1"
      :style="{
        top: isSubTabsHidden ? '88rpx' : '318rpx',
      }"
    >
    </view> -->

    <view class="liveShadow2" v-if="liveCategories.length > 0"> </view>

    <!-- 底部固定按钮 -->

    <view
      v-if="
        currentLive && currentLive.status != 1 && activeMainTab != 'playback'
      "
      class="live-time-info"
    >
      <text>开播时间: {{ currentLive.liveTime }}</text>
    </view>

    <view
      class="fixed-button"
      @tap="handleButtonAction"
      v-if="liveCategories.length > 0"
    >
      <view class="btn" v-if="currentLive && currentLive.status == 1">
        <image
          class="liveicon"
          :src="pre_url + '/static/images/zb-live.gif'"
        ></image>
        {{ coverStatusbtn(currentLive.status) }}</view
      >

      <view
        class="btn2"
        :style="{ backgroundColor: t('color1') }"
        v-if="currentLive.status != 1"
      >
        <image
          class="liveicon2"
          src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250509/c0fd6ab758b747fe5370e2b64a94dfb7.png"
        ></image>
        {{ coverStatusbtn(currentLive.status) }}</view
      >
    </view>

    <view class="model" v-if="showModel">
      <view class="model-content">
        <!--https://pic.hedashepin.com/upload/3/20250126/fcf59458af13a934059eb284fd1ea7ed.png 上方大图 
        https://pic.hedashepin.com/upload/3/20250504/2034d43c8c655735e540fc3fa241a1c9.png-->
        <image class="model-image" :src="posterUrl" mode="widthFix"></image>

        <!-- 中间三个按钮 -->
        <view class="model-buttons">
          <button class="model-button" open-type="share" @click="shareToFriend">
            <image src="@/static/img/weixin.png" class="button-icon"></image>
            <view class="button-text">分享好友</view>
          </button>
          <button class="model-button" @click="saveQRCode">
            <image
              src="https://pic.hedashepin.com/upload/3/20250523/eea9ba799e8d7f68d890f65d5e1f3b7c.png"
              class="button-icon"
            ></image>
            <view class="button-text">保存二维码</view>
          </button>
          <button class="model-button" @click="savePoster">
            <image
              src="https://pic.hedashepin.com/upload/3/20250523/2c2104c2811b9f4ef6d1bbc3a441b2a4.png"
              class="button-icon"
            ></image>
            <view class="button-text">保存海报</view>
          </button>
        </view>

        <!-- 底部关闭按钮 -->
        <view class="close-button" @click="closeModel">
          <image
            src="https://pic.hedashepin.com/upload/3/20250430/4c8d735bac0aefdc5c045dbaefeaac44.png"
            class="close-icon"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      initdata: app.globalData.initdata,
      pre_url: app.globalData.pre_url,
      static_url: app.globalData.static_url,
      activeMainTab: "live",
      activeSubTab: 0,
      swiperCurrent: 1, // 默认显示直播页
      isSubTabsHidden: false,
      hideTabsTimer: null,
      lastScrollTime: Date.now(),
      currentLive: null,
      currentIndex: 0,
      subTabScrollLeft: 0,
      moveWidth: 0,
      autohideSeconds: 8000,
      // 直播分类数据
      liveCategories: [
        // {
        //   id: 1,
        //   title:
        //     "臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常",
        //   image:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/fc2075fbccf8957cf0ab9b22f944ad3b.jpg",
        //   status: "live",
        //   follow: 0,
        //   cover:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/57009fb71ba5d52c00e21df6565fecd8.jpg",
        // },
        // {
        //   id: 2,
        //   title: "厨间美味",
        //   image:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/fc2075fbccf8957cf0ab9b22f944ad3b.jpg",
        //   status: "live",
        //   follow: 1,
        //   cover:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/fc2075fbccf8957cf0ab9b22f944ad3b.jpg",
        // },
      ],
      //关注的分类
      livefollow: [
        // {
        //   id: 1,
        //   title:
        //     "臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常",
        //   image:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/fc2075fbccf8957cf0ab9b22f944ad3b.jpg",
        //   status: "live",
        //   follow: 1,
        //   followNumber: 9999,
        //   cover:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/57009fb71ba5d52c00e21df6565fecd8.jpg",
        // },
        // {
        //   id: 1,
        //   title:
        //     "臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常臻鲜家常",
        //   image:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/fc2075fbccf8957cf0ab9b22f944ad3b.jpg",
        //   status: "preview",
        //   follow: 0,
        //   followNumber: 12,
        //   cover:
        //     "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250108/57009fb71ba5d52c00e21df6565fecd8.jpg",
        // },
      ],
      //回放的数据
      playbacks: [],
      page: 1,
      limit: 10,
      nomore: false,
      canload: true,
      page2: 1,
      limit2: 10,
      nomore2: false,
      canload2: true,
      showModel: false,
      posterUrl: "",
      qrcodeUrl: "",
      share_title: "",
      share_path: "",
      share_imageUrl: "",
    };
  },

  mounted() {
    // 同步获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    const screenWidth = systemInfo.screenWidth;
    this.moveWidth = screenWidth / 5;
  },
  created() {
    // 默认选择第一个直播
    // this.currentLive = this.liveCategories[0];
  },

  onReachBottom: function () {
    // console.log("触底");
    if (this.activeMainTab == "playback") {
      if (this.canload2) {
        this.page2++;
        this.getpblist();
      }
    }
  },

  onShareAppMessage() {
    return {
      title: this.share_title,
      path: this.share_path,
      imageUrl: this.share_imageUrl,
    };
  },

  onLoad() {
    this.getdata();
  },

  methods: {
    getdata() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "LiveChannel/channelList",
        {
          type: 1,
          page: that.page,
          limit: that.limit,
        },
        (res) => {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore = true;
              that.canload = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  channel_id: item.channel_id,
                  id: item.id,
                  title: item.channel_name,
                  image: item.icon,
                  status: item.show_status,
                  follow: item.is_follow,
                  cover: item.banner,
                  followNumber: item.follows,
                  url: item.watch_url,
                  liveTime: item.start_time,
                };
              });
              that.liveCategories = that.liveCategories.concat(newData);
              if (that.page == 1) {
                that.currentLive = that.liveCategories[0];
                that.currentIndex = 0;
                that.activeSubTab = 0;
              }
            }
          }
        }
      );
    },

    getdata2() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "LiveChannel/channelList",
        {
          type: 2,
          page: that.page,
          limit: that.limit,
        },
        (res) => {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore = true;
              that.canload = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  channel_id: item.channel_id,
                  id: item.id,
                  title: item.channel_name,
                  image: item.icon,
                  status: item.show_status,
                  follow: item.is_follow,
                  cover: item.banner,
                  followNumber: item.follows,
                  url: item.watch_url,
                  liveTime: item.start_time,
                };
              });
              that.liveCategories = that.liveCategories.concat(newData);
              if (that.page == 1) {
                that.currentLive = that.liveCategories[0];
                that.currentIndex = 0;
                that.activeSubTab = 0;
              }
            }
          }
        }
      );
    },

    //关注列表（旧方案）
    getfollowlist() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "LiveChannel/channelList",
        {
          type: 2,
          page: that.page2,
          limit: that.limit2,
        },
        (res) => {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore2 = true;
              that.canload2 = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  channel_id: item.channel_id,
                  id: item.id,
                  title: item.channel_name,
                  image: item.icon,
                  status: item.show_status,
                  follow: item.is_follow,
                  cover: item.banner,
                  followNumber: item.follows,
                  url: item.watch_url,
                  liveTime: item.start_time,
                };
              });
              that.livefollow = that.livefollow.concat(newData);
            }
          }
        }
      );
    },

    //获取回放列表
    getpblist() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "LiveChannel/channelList",
        {
          type: 1,
          page: that.page2,
          limit: that.limit2,
        },
        (res) => {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore2 = true;
              that.canload2 = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  channel_id: item.channel_id,
                  id: item.id,
                  title: item.channel_name,
                  image: item.icon,
                  status: item.show_status,
                  follow: item.is_follow,
                  cover: item.banner,
                  followNumber: item.follows,
                  url: item.watch_url,
                  liveTime: item.start_time,
                  publisher: item.publisher,
                };
              });
              that.playbacks = that.playbacks.concat(newData).sort((a, b) => {
                // status为1的排在后面
                if (a.status === 1 && b.status !== 1) return 1;
                if (a.status !== 1 && b.status === 1) return -1;
                return 0; // 其他情况保持原顺序
              });
            }
          }
        }
      );
    },

    //加载更多
    getMorelist() {
      if (this.canload) {
        this.page++;
        this.getdata();
      }
    },

    // 关注
    handlefollow(item) {
      if (item.follow == 1) {
        uni.showModal({
          title: "提示",
          content: "确定要取消关注吗？",
          success: (res) => {
            if (res.confirm) {
              app.showLoading("请求中");
              app.post(
                "LiveChannel/followChannel",
                { live_channel_id: item.id },
                (res) => {
                  app.showLoading(false);
                  if (res.status == 200) {
                    item.follow = item.follow === 1 ? 0 : 1;
                  } else {
                    app.error(res.msg);
                  }
                }
              );
            }
          },
        });
      } else {
        app.showLoading("请求中");
        app.post(
          "LiveChannel/followChannel",
          { live_channel_id: item.id },
          (res) => {
            app.showLoading(false);
            if (res.status == 200) {
              item.follow = item.follow === 1 ? 0 : 1;
            } else {
              app.error(res.msg);
            }
          }
        );
      }
    },

    handleMoreClick() {
      if (this.isSubTabsHidden) {
        this.showSubTab();
      } else {
        this.isSubTabsHidden = true;
      }
    },

    // 切换主tab
    switchMainTab(tab) {
      this.activeMainTab = tab;
      this.swiperCurrent = tab === "follow" ? 0 : 1;
      this.nomore = false;
      this.nomore2 = false;
      this.canload = true;
      this.canload2 = true;
      this.page = 1;
      this.page2 = 1;
      this.liveCategories = [];
      this.playbacks = [];
      this.showSubTab();
      this.subTabScrollLeft = 0;
      if (tab === "live") {
        this.getdata();
      }
      if (tab === "follow") {
        this.getdata2();
      }
      if (tab === "playback") {
        this.getpblist();
      }
    },

    // 切换子tab
    switchSubTab(index) {
      this.currentIndex = index;
      this.activeSubTab = index;
      this.currentLive = this.liveCategories[index];
      //   // 更新当前选中的直播
      //   if (this.liveCategories[index].status ==2) {
      //     // 如果是预告，找一个预告的直播
      //     const previewLive = this.liveList.find(
      //       (item) => item.status ==2
      //     );
      //     if (previewLive) {
      //       this.currentLive = previewLive;
      //     }
      //   } else {
      //     // 如果是直播中，找一个直播中的
      //     const liveLive = this.liveList.find((item) => item.status ==1);
      //     if (liveLive) {
      //       this.currentLive = liveLive;
      //     }
      //   }

      // 重置隐藏计时器
      this.resetHideTimer();
    },

    // 处理swiper切换
    handleSwiperChange(e) {
      const current = e.detail.current;
      this.activeMainTab = current === 0 ? "follow" : "live";
    },

    // 处理swiper过渡
    handleSwiperTransition() {
      // 重置隐藏计时器
      // this.resetHideTimer();
    },

    // 处理swiper动画完成
    handleSwiperAnimationFinish() {
      // 可以在这里处理一些动画完成后的逻辑
    },

    // 处理滚动事件
    showSubTab() {
      this.isSubTabsHidden = false;
      this.lastScrollTime = Date.now();
      // 重置隐藏计时器
      this.resetHideTimer();
    },

    // 处理滚动结束事件
    handleScrollEnd() {
      // 重置隐藏计时器
      // this.resetHideTimer();
    },

    // 重置隐藏计时器
    resetHideTimer() {
      // 清除之前的定时器
      if (this.hideTabsTimer) {
        clearTimeout(this.hideTabsTimer);
      }

      // 设置新的定时器，n秒后隐藏子tab栏
      this.hideTabsTimer = setTimeout(() => {
        this.isSubTabsHidden = true;
        console.log("隐藏子tab栏");
      }, this.autohideSeconds);
    },

    //1直播中 2,预告中 3已预约
    coverStatus(status) {
      if (status === 1) {
        return "直播中";
      } else if (status === 2) {
        return "预告中";
      } else {
        return "已预约";
      }
    },

    coverStatusbtn(status) {
      if (status === 1) {
        return "进入直播间";
      } else if (status === 2) {
        return "立即预约";
      } else {
        return "已预约";
      }
    },

    // 进入直播间或预约
    enterLiveRoom(item) {
      this.currentLive = item;
    },

    todetail(item) {
      if (this.currentLive.status === 1) {
        // 进入直播间
        app.goto(
          "/pagesSocial/livesQuare/lives_webView?url=" +
            encodeURIComponent(item.url) +
            "&channelId=" +
            item.channel_id
        );
      } else if (this.currentLive.status === 2) {
        app.error("直播未开始");
      } else {
        app.error("直播未开始");
      }
    },

    // 处理底部按钮点击
    handleButtonAction() {
      if (this.currentLive.status === 1) {
        // 进入直播间
        app.goto(
          "/pagesSocial/livesQuare/lives_webView?url=" +
            encodeURIComponent(this.currentLive.url) +
            "&channelId=" +
            this.currentLive.channel_id
        );
      } else if (this.currentLive.status === 2) {
        // 预约直播
        this.getTmplIds();
        app.showLoading("请求中");
        app.get(
          "LiveChannel/subscribeChannel",
          {
            live_channel_id: this.currentLive.id,
            subscribe_date: this.currentLive.liveTime,
          },
          (res) => {
            app.showLoading(false);
            if (res.status == 200) {
              this.currentLive.status = 3;
              app.error("直播预约成功，我们将在开播前提醒您！");
            } else {
              app.error(res.msg);
            }
          }
        );
      } else {
      }
    },

    //预约通知模版
    getTmplIds: function (e) {
      let that = this;
      // #ifdef MP-WEIXIN
      app.get(
        "Wxtmpl/getTmplIds",
        {
          type: 8,
        },
        function (res) {
          var tmplIds = res.res;
          console.log(tmplIds);
          if (res.res) {
            wx.requestSubscribeMessage({
              tmplIds: tmplIds,
              success(res) {
                console.log("订阅消息获取成功:", res);
                if (res[tmplIds] == "reject") {
                  console.log("用户点击拒绝");
                }
                if (res[tmplIds] == "accept") {
                  console.log("用户点击接收");
                }
              },
              fail(er) {
                console.log("订阅消息获取失败");
                console.log(er);
              },
              complete(res, err) {},
            });
          } else {
            app.error(res.msg);
          }
        }
      );
      // #endif
    },

    // 处理直播轮播图切换
    handleLiveSwiperChange(e) {
      console.log("切换直播间：", e.detail.current);
      this.isSubTabsHidden = true;
      // this.showSubTab();
      const current = e.detail.current; // 更新当前选中的直播

      if (current > this.currentIndex) {
        if (current - this.currentIndex == 1) {
          this.subTabScrollLeft = this.subTabScrollLeft + this.moveWidth;
        }
      } else {
        if (this.currentIndex - current == 1) {
          this.subTabScrollLeft = this.subTabScrollLeft - this.moveWidth;
        }
      }

      this.currentIndex = current;
      this.activeSubTab = current;
      this.currentLive = this.liveCategories[current];

      if (current == this.liveCategories.length - 1) {
        this.getMorelist();
      }
    },

    subtabshandleScroll(e) {
      const { scrollLeft, scrollWidth } = e.detail;
      // console.log("subtabshandleScroll", scrollLeft, scrollWidth);
    },

    rightReach() {
      console.log("到达右侧尽头");
      this.getMorelist();
      if (!this.canload) {
        // app.error("没有更多了");
      }
    },

    getPoster() {
      var that = this;
      app.showLoading("加载中");
      app.post(
        "LiveChannel/getLivePoster",
        { channel_id: that.currentLive.channel_id },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            that.posterUrl = res.data.share_poster;
            that.qrcodeUrl = res.data.share_wxacode;
            that.share_title = res.data.share_title;
            that.share_path = res.data.share_url;
            that.share_imageUrl = res.data.share_banner;
            that.showModel = true;
          }
        }
      );
    },

    handleButtonClick() {
      this.getPoster();
    },

    handleButtonClick2(item) {
      var that = this;
      app.showLoading("加载中");
      app.post(
        "LiveChannel/getLivePoster",
        { channel_id: item.channel_id },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            that.posterUrl = res.data.share_poster;
            that.qrcodeUrl = res.data.share_wxacode;
            that.share_title = res.data.share_title;
            that.share_path = res.data.share_url;
            that.share_imageUrl = res.data.share_banner;
            that.showModel = true;
          }
        }
      );
    },

    closeModel() {
      this.showModel = false;
      this.share_title = "和大直播";
      this.share_path = "/pagesSocial/livesQuare/lives";
      this.share_imageUrl = this.currentLive.cover;
    },

    shareToFriend() {
      let that = this;
      uni.share({
        title: that.share_title,
        path: that.share_path,
        imageUrl: that.share_imageUrl,
      });
    },

    saveQRCode() {
      this.save(this.qrcodeUrl);
    },

    savePoster() {
      this.save(this.posterUrl);
    },

    //保存
    save(spath) {
      var _this = this;
      var src = spath;
      //#ifdef MP-WEIXIN
      //提前向用户发起授权请求
      uni.authorize({
        scope: "scope.writePhotosAlbum",
        success() {
          console.log("dp-previewImage:允许储存");
          _this.downloadImg(src);
        },
      });
      //#endif

      //#ifdef APP-PLUS
      _this.downloadImg(src);
      //#endif

      //#ifdef H5
      //非同源图片将直接打开
      var abtn = document.createElement("a");
      abtn.href = src;
      abtn.download = "";
      abtn.target = "_blank";
      abtn.click();
      //#endif
    },

    //下载并保存文件
    downloadImg(src) {
      //下载图片文件
      uni.showLoading({
        title: "大图提取中",
      });
      uni.downloadFile({
        url: src,
        success: function (res) {
          console.log("dp-previewImage:下载成功");
          uni.hideLoading();
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: "已保存至相册",
                duration: 1000,
              });
            },
          });
        },
        fail: function () {
          uni.hideLoading();
          uni.showToast({
            title: "图片下载失败",
            icon: "none",
            duration: 1000,
          });
        },
      });
    },

    toPlayBack(item) {
      app.goto(
        "/pagesSocial/livesQuare/lives_webView?url=" +
          encodeURIComponent(item.url) +
          "&channelId=" +
          item.channel_id
      );
    },

    formatDateTime(inputStr) {
      const date = new Date(inputStr);
      // 获取月份（注意月份从0开始，需要+1）
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      // 获取日期
      const day = date.getDate().toString().padStart(2, "0");
      // 获取小时
      const hours = date.getHours().toString().padStart(2, "0");
      // 获取分钟
      const minutes = date.getMinutes().toString().padStart(2, "0");

      return `${month}/${day} ${hours}:${minutes}`;
    },
  },
};
</script>

<style lang="scss">
.lives-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  // 顶部主tab切换栏
  .main-tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .tab-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120rpx;
      height: 100%;
      margin: 0 15rpx;

      text {
        font-size: 32rpx;
        color: #333;
      }

      &.active {
        text {
          // color: #ff4d4f;
          font-weight: bold;
        }
      }

      .tab-line {
        position: absolute;
        bottom: 0;
        width: 50rpx;
        height: 4rpx;
        background-color: #ff4d4f;
        border-radius: 2rpx;
      }

      .live-img {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 90rpx;
        // top: 10rpx;
      }
    }
  }

  // 内容区域
  .content-swiper {
    width: 100%;
    flex: 1;
    margin-top: 88rpx;
  }

  // 滚动视图
  .scroll-view {
    width: 100%;
    height: 100%;
  }

  // 子tab栏
  .sub-tabs {
    // position: sticky;
    // top: 0;
    position: fixed;
    top: 88rpx;
    z-index: 5;
    width: 100%;
    background-color: #fff;
    padding: 0rpx 0;
    transition: all 0.3s ease;
    transform-origin: top;
    transform: scaleY(1);
    opacity: 1;
    height: 210rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.hidden {
      transform: scaleY(0);
      opacity: 0;
      height: 0;
      padding: 0;
    }

    .sub-tabs-scroll {
      white-space: nowrap;
      width: 100%;

      ::-webkit-scrollbar {
        display: none;
      }

      .sub-tab-item {
        display: inline-block;
        width: 140rpx;
        margin: 0 7rpx;
        text-align: center;
        position: relative;
        height: auto;

        .item-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;

          .category-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            margin-bottom: 10rpx;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.4);
            }
          }

          .status-tag {
            // position: absolute;
            // bottom: 10rpx;
            // left: 50%;
            // transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rpx 14rpx;
            border-radius: 12rpx;
            font-size: 20rpx;
            z-index: 2;
            margin-top: -30rpx;
            color: #fff;
            background-color: rgba(128, 0, 128, 1);

            &.live-tag {
              background-color: rgba(128, 0, 128, 1);
              color: #fff;
            }

            &.preview-tag {
              background-color: rgba(255, 165, 0, 1);
              color: #fff;
            }

            .status-icon {
              width: 30rpx;
              height: 30rpx;
              margin-right: 4rpx;
            }
          }

          .category-name {
            display: block;
            font-size: 26rpx;
            color: #333;
            margin-bottom: 4rpx;
            width: 140rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .category-img-name {
            font-weight: bold;
            font-size: 32rpx;
            overflow: hidden;
            -webkit-line-clamp: 2;
            color: #fff;
            position: absolute;
            text-wrap: wrap;
            width: 120rpx;
            height: 120rpx;
            padding: 20rpx;
            top: -6rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            word-break: break-all; /* 强制换行 */
            white-space: pre-wrap; /* 保留空白符序列，并自动换行 */
            line-height: 1.2;
          }

          .live-time {
            display: block;
            font-size: 22rpx;
            color: #999;
          }
        }

        &.active {
          .category-name {
            color: #ff4d4f;
            font-weight: bold;
          }
        }
      }
    }
  }

  // 直播轮播图
  .live-swiper {
    width: 100%;
    // height: 100%;
    height: calc(100vh - 88rpx);
    background-color: #fff;
    // box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.3),
    //   /* 上阴影 */ inset 0 -10px 10px -10px rgba(0, 0, 0, 0.3); /* 下阴影 */
    position: absolute;
    bottom: 0;
    .live-item {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #e7e7e7;

      .live-cover {
        width: 100%;
        // height: 360rpx;
        height: 100%;
      }

      .liveShadow {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
        width: 100vw;
        height: 20vh;
        // background: linear-gradient(
        //   to bottom,
        //   rgba(0, 0, 0, 0.5) 10%,
        //   rgba(0, 0, 0, 0)
        // );
        background: linear-gradient(
          180deg,
          rgba(16, 16, 16, 0.08) 0%,
          rgba(16, 16, 16, 0.06) 0%,
          rgba(16, 16, 16, 0.79) 0%,
          rgba(16, 16, 16, 0) 81%
        );
      }

      .liveinfo {
        position: absolute;
        top: 30rpx;
        padding: 0 30rpx;
        // padding: 6rpx 16rpx;
        border-radius: 6rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        gap: 15rpx;
        z-index: 9999;
        width: 100%;

        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 15rpx;
          .live-head {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 15rpx;
            .live-icon {
              width: 100rpx;
              height: 100rpx;
              border-radius: 50%;
              position: relative;
              // border: 1px solid rgba(187, 187, 187, 1);
              border: 3rpx solid #fff;
            }
            .live-follow {
              position: absolute;
              bottom: -10rpx;
              border-radius: 25rpx;
              // border: 3rpx solid #fff;
              padding: 4rpx 10rpx;
              font-size: 16rpx;
              background-color: rgba(128, 0, 128, 1);
              color: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              .follow-icon {
                display: inline-block;
                z-index: 9;
                width: 16rpx;
                height: 16rpx;
                margin-right: 10rpx;
              }
            }
          }
          .live-title {
            font-size: 32rpx;
            color: #fff;
            // font-weight: bold;
            max-width: 50vw;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .live-more {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f9b90b;
            border-radius: 10rpx;
            padding: 4rpx 12rpx;
            font-size: 24rpx;
            margin-left: 10rpx;
            flex-shrink: 0;
            .icon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 10rpx;
              margin-top: 6rpx;
              transition: transform 0.3s ease;
            }
          }
        }
        .share-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          // width: 48rpx;
          // height: 48rpx;
          margin-right: 10rpx;
          flex-shrink: 0;
          .btn-icon {
            width: 36rpx;
            height: 36rpx;
          }

          .btn-text {
            color: white;
            font-size: 30rpx;
            margin-left: 10rpx;
          }
        }
      }

      .status-badge {
        position: absolute;
        top: 20rpx;
        left: 20rpx;
        padding: 6rpx 16rpx;
        border-radius: 6rpx;
        font-size: 24rpx;

        &.live-badge {
          background-color: rgba(128, 0, 128, 0.8);
          color: #fff;
        }

        &.preview-badge {
          background-color: rgba(255, 165, 0, 0.8);
          color: #fff;
        }
      }
    }
  }

  // 关注页空状态
  .follow-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    text {
      font-size: 28rpx;
      color: #999;
    }
  }

  // 关注页列表
  .follow-list {
    padding: 30rpx;
    padding-bottom: 0rpx;
    overflow: hidden;

    .follow-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.4);
      position: relative;
      margin-bottom: 40rpx;

      .status-tag {
        position: absolute;
        right: 12rpx;
        top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        z-index: 2;
        margin-top: -20rpx;
        color: #fff;
        background-color: rgba(128, 0, 128, 1);

        .status-icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 4rpx;
        }
      }

      .item-top {
        width: 100%;
        height: 200rpx;
        .item-img {
          width: 100%;
          height: 100%;
        }
      }
      .item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 12rpx;
        padding: 12rpx;
        .bottom1 {
          .item-img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
          }
        }
        .bottom2 {
          display: flex;
          flex-direction: column;
          gap: 12rpx;
          width: 100%;
          .item-name {
            font-size: 30rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .item-desc {
            font-size: 25rpx;
            color: #999;
          }
        }
        .bottom3 {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          .live-follow {
            border-radius: 10rpx;
            padding: 4rpx 12rpx;
            font-size: 25rpx;
            background-color: rgba(128, 0, 128, 0.8);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }

  .liveShadow1 {
    pointer-events: none;
    position: absolute;
    top: 0rpx;
    left: 0rpx;
    width: 100vw;
    height: 15vh;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0)
    );
  }

  .liveShadow2 {
    z-index: 10;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 100vw;
    height: 20vh;
    // background: linear-gradient(
    //   to top,
    //   rgba(0, 0, 0, 0.5) 10%,
    //   rgba(0, 0, 0, 0)
    // );
    background: linear-gradient(
      360deg,
      rgba(16, 16, 16, 0.08) 0%,
      rgba(16, 16, 16, 0.06) 0%,
      rgba(16, 16, 16, 0.79) 0%,
      rgba(16, 16, 16, 0) 81%
    );
  }

  // 底部固定按钮
  .fixed-button {
    position: fixed;
    bottom: 150rpx;
    left: 50%;
    transform: translateX(-50%);
    // width: 100%;
    height: 80rpx;
    z-index: 20;

    .btn {
      width: auto;
      font-size: 36rpx;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      border: 2rpx solid #fff;
      border-radius: 40rpx;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 12rpx 62rpx;

      .liveicon {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .btn2 {
      font-size: 36rpx;
      width: 100rpx;
      background-color: #ff4d4f;
      color: #fff;
      border-radius: 40rpx;
      width: auto;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border: 2rpx solid #fff;
      padding: 12rpx 62rpx;

      .liveicon2 {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
        margin-top: 6rpx;
      }
    }
  }

  .live-time-info {
    position: fixed;
    bottom: 40rpx;
    // left: 50%;
    // transform: translateX(-50%);
    width: 100%;
    height: 80rpx;
    z-index: 20;
    text-align: center;

    text {
      font-size: 34rpx;
      color: #fff;
      // background-color: rgba(255, 255, 255, 0.8);
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      text-wrap: nowrap;
    }
  }

  /* 蒙版样式 */
  .model {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .model-content {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .model-image {
    width: 100%;
    border-radius: 10rpx;
    margin-bottom: 30px;
    max-height: 66vh;
    overflow-y: auto;
  }

  .model-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    text-align: center;
    justify-content: center;
  }

  .model-buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30rpx;
    z-index: 9999999;
  }

  .button-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  .button-text {
    color: white;
    margin-top: 10rpx;
    font-size: 25rpx;
  }

  .close-button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .close-icon {
    width: 100%;
    height: 100%;
  }

  // 回放列表
  .pb-list {
    padding: 30rpx;
    padding-bottom: 0rpx;
    overflow: hidden;

    .pb-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 20rpx;
      overflow: hidden;
      background-color: #fff;
      /* 阴影效果 */
      box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.15); /* 优化阴影：垂直偏移6rpx，模糊15rpx，透明度0.15 */
      position: relative;
      margin-bottom: 30rpx;
      .item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 24rpx;
        padding: 20rpx;
        .bottom1 {
          height: 230rpx;
          .item-img {
            width: 300rpx;
            height: 100%;
            border-radius: 10rpx;
          }
        }
        .bottom2 {
          display: flex;
          flex-direction: column;
          // gap: 16rpx;
          width: 100%;
          height: 230rpx;
          justify-content: space-between;
          .item-name {
            font-size: 30rpx;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .item-desc {
            font-size: 30rpx;
          }
          .item1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 30rpx;
            color: #999;
            .i-time {
              font-size: 28rpx;
              font-family: initial;
            }
            .i-share {
              width: 35rpx;
              height: 35rpx;
            }
          }
          .item2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            font-size: 38rpx;
            color: #000;
            gap: 12rpx;
            font-family: initial;
            font-weight: bold;
          }
          .item3 {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            color: #999;
            gap: 12rpx;
            .i-author {
              font-size: 25rpx;
              word-break: break-all;
              text-overflow: ellipsis;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              font-family: initial;
            }
            .i-img {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              flex-shrink: 0;
              background-color: #dedede;
            }
          }
          .item4 {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .i-btn {
              padding: 10rpx 22rpx;
              border-radius: 28rpx;
              font-size: 25rpx;
              color: #ffffff;
              background-color: rgb(154, 17, 178);
              // margin-right: 10rpx;
              margin-top: 5rpx;
              font-family: initial;
            }

            .i-btn2 {
              padding: 10rpx 22rpx;
              border-radius: 28rpx;
              font-size: 25rpx;
              color: #ffffff;
              background-color: #b5b5b5;
              margin-right: 10rpx;
              margin-top: 5rpx;
            }
          }
        }
        .bottom3 {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          .live-follow {
            border-radius: 10rpx;
            padding: 4rpx 12rpx;
            font-size: 25rpx;
            background-color: rgba(128, 0, 128, 0.8);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .item-btn {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 33rpx;
        font-size: 28rpx;
        color: #000;
        border: 1rpx solid rgba(187, 187, 187, 1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
